<template>
  <section class="scene-section">
    <div class="scene-list">
      <div
        v-for="(item, index) in sceneList"
        :key="index"
        class="scene-item"
        :class="{ active: activeIndex === index }"
        @mouseenter="handleMouseEnter(index)"
        @mouseleave="handleMouseLeave()"
      >
        <div class="scene-inner">
          <img :src="item.icon" alt="场景图标" class="scene-icon" />
          <!-- eslint-disable-next-line vue/no-v-html -->
          <p class="scene-name" v-html="item.name"></p>
          <p v-if="activeIndex === index" class="scene-desc">{{ item.desc }}</p>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const sceneList = [
  {
    name: '健康评估<br/>多维度健康评估',
    desc: '提供社区健康管理解决方案，提升居民健康水平，降低医疗成本。',
    icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
  },
  {
    name: '健康方案<br/>全方位的精准健康方案',
    desc: '智能化健康评估系统，提升体检效率，优化健康管理流程。',
    icon: 'https://images.health.ufutx.com/202506/24/503809312df23d43973da63b6e9bf24b.png'
  },
  {
    name: '健康数据<br/>AI健康数据洞察',
    desc: '基于生理+心理双指标模型，结合AI多维度模型分析，为组织和个人提供科学精准的健康解决方案。',
    icon: 'https://images.health.ufutx.com/202506/24/29193b790b1c94ac0b83ea3ac72d10f9.png'
  },
  {
    name: '健康服务团队<br/>双重认证教练团队',
    desc: '连接健康产业上下游，提供精准数据分析和市场洞察。',
    icon: 'https://images.health.ufutx.com/202506/24/503809312df23d43973da63b6e9bf24b.png'
  },
  {
    name: '健康监测<br/>实时动态健康监测',
    desc: '提供专业健康管理培训课程，培养行业人才，提升服务质量。',
    icon: 'https://images.health.ufutx.com/202506/17/e9154a90cda4a24ff0cb3c0fb83795e5.png'
  }
]

const activeIndex = ref(2) // 默认为第三个场景（索引2）

const handleMouseEnter = (index: number) => {
  activeIndex.value = index
}

const handleMouseLeave = () => {
  activeIndex.value = 2 // 鼠标离开后回到第三个场景
}

onMounted(() => {
  // 确保DOM加载后激活第三个场景
  activeIndex.value = 2
})
</script>

<style scoped lang="less">
.scene-section {
  text-align: center;
  background-color: #f5f7fe;
  .pt(80+42px);
  //.pb(80-42px);
  height: 580px;
  .scene-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    justify-items: center;
    .px(192px);
    margin: 0 auto;
  }

  .scene-item {
    perspective: 1000px;
    cursor: pointer;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); // 增加容器过渡

    .scene-inner {
      position: relative;
      width: 100%;
      .pt(20px);
      .pb(30px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #fff;
      border-radius: 10px;
      transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); // 延长动画时间
      will-change: transform, box-shadow, opacity;

      .scene-icon {
        width: 291px;
        height: 218px;
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); // 图标动画
        transform-origin: center;
        opacity: 0.9; // 默认降低不透明度
      }

      .scene-name {
        font-size: @font-size-lg;
        font-weight: bold;
        color: @text-color;
        text-align: center;
        .mt(10px);
        line-height: 30px;
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); // 文字动画
      }

      .scene-desc {
        font-size: @font-size-sm;
        color: @text-color-light;
        line-height: 25px;
        text-align: center;
        max-height: 0;
        opacity: 0;
        .px(20px);
        .mt(10px);
        overflow: hidden;
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); // 描述动画
      }
    }

    &.active .scene-inner {
      transform: translateY(-42px);
      border-radius: 10px;
      background: #fff;
      box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.08);
      //box-shadow: 0 20px 40px rgba(22, 93, 255, 0.15); // 增强阴影
      //background: linear-gradient(180deg, #ffffff 0%, #f8fafe 100%); // 轻微渐变背景
    }

    &.active .scene-icon {
      opacity: 1; // 激活时恢复完全不透明
      //transform: scale(1.05); // 轻微放大图标
    }

    &.active .scene-name {
      //color: @primary-color; // 激活时文字变色
      transform: translateY(-5px); // 文字轻微上移
    }

    &.active .scene-desc {
      max-height: 120px;
      opacity: 1;
      transform: translateY(-5px); // 描述文字上移
    }
  }
}
/* ------------------- 移动端适配（max-width: 768px） ------------------- */
@media (max-width: 768px) {
  .scene-section {
    padding-top: 40px; // 减少顶部留白
    height: auto; // 取消固定高度，内容自适应
    padding-bottom: 40px; // 增加底部留白，避免内容贴边
    overflow: visible; // 允许激活态自然显示
  }

  // 网格改为单列布局
  .scene-list {
    grid-template-columns: 1fr; // 每个item占满宽度
    gap: 30px; // 增加垂直间距，避免拥挤
    padding: 0 15px; // 左右小边距，避免贴边
    max-width: 350px; // 限制最大宽度，避免大屏手机拉伸
  }

  // 场景项适配
  .scene-item {
    // 触摸设备增加点击反馈
    &:active {
      transform: scale(0.98);
    }

    .scene-inner {
      height: 120px;
      padding: 15px 0 20px; // 减少内边距

      // 图标缩小，适配小屏
      .scene-icon {
        width: 100%;
        max-width: 200px; // 限制图标最大宽度
        height: auto; // 保持宽高比，避免拉伸
      }

      // 名称字体缩小
      .scene-name {
        line-height: 12px !important;
      }

      // 描述优化小屏显示
      .scene-desc {
        line-height: 12px !important;
      }
    }

    // 激活态：减小位移，避免过度上移
    &.active .scene-inner {
      transform: translateY(-20px); // 桌面端-42px → 移动端-20px
    }

    // 描述最大高度适配小屏
    &.active .scene-desc {
      max-height: 80px; // 减少高度，避免占用过多空间
    }
  }
}
</style>
